import {useState} from 'react'
 
function App() {
  // 定义todo列表数据
  const [todo,setTodo] = useState([
    {title:"学习Vue",done:true},
    {title:"学习React",done:false}
  ])
  // 定义被添加的临时数据
  const [temp,setTemp] = useState("");

  // 定义添加，删除，更新方法
  const add = (e)=>{
    if(e.key==="Enter"){
      // 先获取之前的todo
      let list= todo;
      // 添加新的内容 done默认为false
      list.unshift({title:temp,done:false})
      // 更新temp
      setTemp('');
      // 更新todo
      setTodo(list);
    }
  };
  const remove = (item)=>{
 
  };
  const update = (e,item)=>{
    const  list = todo;
    // 找到标题一致的下标
    // 如果当前遍历的元素it的标题等于item的标题就返回当前元素的下标
    const ind = list.findIndex(it=>item.title==it.title);
    list[ind].done = e.target.checked;
    console.log(e.target,e.target.checked,ind);
    // 更新todo
    setTodo([...list]);
    
  };
   // 计算已完成与未完成
  //  filter 过滤，回调函数返回真保留，返回假过滤掉
  const dtodo = todo.filter(item=>item.done);
  const utodo = todo.filter(item=>!item.done)
  // 17:10开始上课


  return ( <>
  <div>
    <input type="text" value={temp} onChange={e=>setTemp(e.target.value)} onKeyUp={add}/>
  </div>
  <h3>未完成 {utodo.length} </h3>
  <div className="list">
      {
        utodo.map((item,index)=><div key={index}>
        <input type="checkbox" checked={item.done} onChange={(e)=>{update(e,item)}} />
        <span>{item.title}</span>
        <button>x</button>
      </div>)
      }
  </div>
  <h3>已完成{dtodo.length}</h3>
  <div className="list doneList">
  {
        dtodo.map((item,index)=><div key={index}>
        <input type="checkbox"  checked={item.done} onChange={(e)=>{update(e,item)}} />
        <span>{item.title}</span>
        <button>x</button>
      </div>)
      }
  </div>
  </> );
}

export default App;